<template>
<div>
<head>
<title>首页</title>
</head>
<!--轮播图-->
<div id="head">
  <div style="margin: 10px 0">
      <el-carousel height="400px" :interval="10000">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" style="width: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>
</div>

<!--内容-->
<div id="body">
  <div id="saizhi"> 
      <div class="htitle">
        <strong>比赛赛程</strong>
        
      </div>
    </div>
  <div style="margin: 10px 0;width: 1000px;">
      <el-select v-model="leagueSeason" clearable placeholder="赛季" style="width: 100px;margin-right: 10px;" >
        <el-option v-for="item in seasonoptions" :key="item.name" :label="item.name" :value="item.value">
            {{ item.name }}
        </el-option>
      </el-select>
      <el-select v-model="leagueId" clearable placeholder="联赛" style="width: 200px;margin-right: 10px;" @change="changeLeague()">
        <el-option v-for="item in leagueoptions" :key="item.id" :label="item.leagueName" :value="item.id">
            {{ item.leagueName }}
        </el-option>
      </el-select>

      <el-select v-model="gameRounds" clearable placeholder="轮次" style="width: 100px;margin-right: 10px;">
        <el-option v-for="(item,index) in roundsoptions"  :key="index" :label="item" :value="item">
            {{ item }}
        </el-option>
      </el-select>

       <el-select v-model="homeTeam" clearable placeholder="主场球队" style="width: 150px;margin-right: 10px;">
        <el-option v-for="item in homeoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
      </el-select>

      <el-select v-model="awayTeam" clearable placeholder="客场球队" style="width: 150px;margin-right: 10px;">
        <el-option v-for="item in awayoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
      </el-select>

      <el-button class="ml-5" icon="el-icon-search" circle @click="load">查询赛程</el-button>
      <el-button icon="el-icon-remove" circle @click="reset">重置查询</el-button>
    </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  :row-class-name="tableRowClassName" @selection-change="handleSelectionChange" @row-click="GameDetails">
      <el-table-column label="id" align="center" prop="id" v-if="false" />
      <el-table-column label="轮次" fixed width="60px">
        <template slot-scope="scope">
          <div v-if="scope.row.gameRounds">
          第{{scope.row.gameRounds}}轮     
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="gameTime" label="比赛时间" fixed width="140px"></el-table-column>
      <el-table-column prop="league.leagueSeason" label="赛季"></el-table-column>
      <el-table-column prop="league.leagueName" label="联赛"></el-table-column>
      <el-table-column label="主场球队" >
        <template slot-scope="scope">
          <div v-if="scope.row.hometeaminfo">
          <a class="testA" @click="TeamDetail(scope.row.hometeaminfo.id)">{{scope.row.hometeaminfo.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="hometeaminfo.teamImg" label="主场球队图片" width="120px" >
        <template slot-scope="scope">
          <div v-if="scope.row.hometeaminfo" @click="TeamDetail(scope.row.hometeaminfo.id)">
             <img :src="scope.row.hometeaminfo.teamImg" width="100" height="100">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>

      <el-table-column  label="比分" >
        <template slot-scope="scope"> 
            <div v-if="scope.row.gameData"  :class="winorlose(scope.row)">
              {{scope.row.gameData.homeGoal}} ： {{scope.row.gameData.awayGoal}} 
            </div>
            <div v-else>无比分信息</div>   
        </template>

      </el-table-column>

      <el-table-column  label="客场球队" >
        <template slot-scope="scope">
          <div v-if="scope.row.awayteaminfo">
          <a class="testA" @click="TeamDetail(scope.row.awayteaminfo.id)">{{scope.row.awayteaminfo.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="awayteaminfo.teamImg" label="客场球队图片" width="120px">
        <template slot-scope="scope">
          <div v-if="scope.row.awayteaminfo.teamImg" @click="TeamDetail(scope.row.awayteaminfo.id)">
             <img :src="scope.row.awayteaminfo.teamImg" width="100" height="100">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      
      <el-table-column prop="gameYard" label="比赛场地" ></el-table-column>
      <el-table-column prop="gameReferee" label="主裁判"></el-table-column>
      <!-- <el-table-column prop="league.leagueSeason" label="赛季"></el-table-column>
      <el-table-column prop="league.leagueName" label="联赛"></el-table-column> -->
    

      <!-- <el-table-column label="操作"  width="280" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="gamedata(scope.row)" ><i class="el-icon-s-marketing"></i>比赛详细数据</el-button>
          <el-button type="success" @click="GameDetail(scope.row.id)" ><i class="el-icon-s-marketing"></i>比赛技术统计</el-button>
          <el-button type="warning" @click="playerdata(scope.row)" ><i class="el-icon-s-marketing"></i>球员场上数据</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>



    <div style="display:inline-block" width="100px" height="50px" v-if="leagueId!=''">
      <img v-if="frontleaguefrom.leagueImg" :src="frontleaguefrom.leagueImg" width="50" height="50" style="display:inline-block">
    </div>
    <div style="display:inline-block" v-if="leagueId!=''">
      <h2 v-if="frontleaguefrom.leagueName" style="display:inline-block;">{{frontleaguefrom.leagueName+frontleaguefrom.leagueSeason}}</h2>
    </div>



    <div style="margin: 10px 0;width: 1000px;" v-if="leagueId!=''">
      
      <el-select v-model="homeAway" clearable placeholder="主客场" style="width: 100px;margin-right: 10px;">
        <el-option value="全部">全部</el-option>
        <el-option value="主场">主场</el-option>
        <el-option value="客场">客场</el-option>
      </el-select>
      
      <strong style="display:inline-block;margin-right: 10px;font-size: 12px;">联赛积分榜:</strong>
      <el-button aria-placeholder="联赛积分榜" style="width: 100px;margin-right: 10px;" @click="loadleaguetable">联赛积分榜</el-button>
      

        <strong style="display:inline-block;margin-right: 10px;font-size: 12px;">球队数据榜单:</strong>
      <el-select  v-model="teamRankId" clearable placeholder="请选择球队榜单" style="width: 150px;margin-right: 10px;">
        <el-option v-for="item in teamrankoptions" :key="item.id" :label="item.value" :value="item.id">
          {{ item.value }}
        </el-option>
      </el-select>


        <strong style="display:inline-block;margin-right: 10px;font-size: 12px;">球员数据榜单:</strong>
      <el-select  v-model="playerRankId"  clearable placeholder="请选择球员榜单" style="width: 150px;margin-right: 10px;">
        <el-option v-for="item in playerrankoptions" :key="item.id" :label="item.value" :value="item.id">
          {{ item.value }}
        </el-option>
      </el-select>

      <el-button class="ml-5" icon="el-icon-search" circle @click="loadRank">查询榜单</el-button>
      <el-button icon="el-icon-remove" circle @click="resetRank">重置查询</el-button> 
    </div>


    <!--积分榜、射手榜、助攻榜等榜单-->
     <div id="saizhi" v-if="leagueId!=''"> 
      <div class="htitle">
        <strong>{{rankname}}</strong>
        </div>
    </div> 

    <div v-if="leagueId!=''">



      <el-table v-if="!ranktableData.length==0"  :data="ranktableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column  label="球队名称" >
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>

      </el-table-column>
      <el-table-column  label="球队图片" >
        <template slot-scope="scope">
          <div v-if="scope.row.team">
             <img :src="scope.row.team.teamImg" width="60" height="60" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>

      <el-table-column prop="totalRounds" label="赛" ></el-table-column>
      <el-table-column prop="totalWin" label="胜" ></el-table-column>
      <el-table-column prop="totalFlatten" label="平" ></el-table-column>
      <el-table-column prop="totalLose" label="负" ></el-table-column>
      <el-table-column prop="totalGoal" label="得" ></el-table-column>
      <el-table-column prop="totalFumble" label="失" ></el-table-column>
      <el-table-column prop="goalDiff" label="净" ></el-table-column>
      <el-table-column prop="averageGoal" label="均得" ></el-table-column>
      <el-table-column prop="averageFumble" label="均负" ></el-table-column>
      <el-table-column prop="totalPoints" label="积分" ></el-table-column>
    </el-table>
      
    <el-table v-if="rankname=='球队进球榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px">
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg"  style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column prop="totalGoal" label="进球" ></el-table-column>
      <el-table-column prop="averageGoal" label="场均进球" ></el-table-column>
    </el-table>
    
    <el-table v-if="rankname=='球队失球榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px" >
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg"  style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column prop="totalFumble" label="失球" ></el-table-column>
      <el-table-column prop="averageFumble" label="场均失球"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球队身价榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">\
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px">
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>

      <el-table-column prop="team.teamValue" label="身价" width="150px"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球队控球榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px" >
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column label="场均控球率" >
        <template slot-scope="scope"> 
            <div v-if="scope.row.totalControl">
              {{scope.row.totalControl}}%
            </div> 
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="rankname=='球队射门榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px" >
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column prop="totalShoot" label="射门" ></el-table-column>
      <el-table-column prop="averageShoot" label="场均射门" ></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球队射正榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px">
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column prop="totalOntarget" label="射正" ></el-table-column>
      <el-table-column prop="averageOntarget" label="场均射正" ></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球队传球榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px" >
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column label="传球数（成功传球数）" >
        <template slot-scope="scope"> 
            <div v-if="scope.row.totalPass">
              {{scope.row.totalPass}}({{scope.row.totalOkpass}})
            </div> 
        </template>
      </el-table-column>
      <el-table-column label="场均传球数（场均成功传球数）" >
        <template slot-scope="scope"> 
            <div v-if="scope.row.averagePass">
              {{scope.row.averagePass}}({{scope.row.averageOkpass}})
            </div> 
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="rankname=='球队越位榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px" >
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column prop="totalOffside" label="越位数" ></el-table-column>
      <el-table-column prop="averageOffside" label="场均越位数" ></el-table-column>
    </el-table>
    
    <el-table v-if="rankname=='球队过人榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px" >
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column prop="totalSurpass" label="过人数"></el-table-column>
      <el-table-column prop="averageSurpass" label="场均过人数" ></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球队犯规榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px" >
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column prop="totalFoul" label="犯规数" ></el-table-column>
      <el-table-column prop="averageFoul" label="场均犯规数" ></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球队黄牌榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px" >
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column prop="totalYcard" label="黄牌"></el-table-column>
      <el-table-column prop="averageYcard" label="场均黄牌"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球队红牌榜'"  :data="rankteamData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.team">
          <a class="testA" @click="TeamDetail(scope.row.team.id)">{{scope.row.team.teamName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片" width="300px" >
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg" style="text-align:center">
             <img :src="scope.row.team.teamImg" style="display: inline-block;vertical-align: middle;" width="100" height="100" @click="TeamDetail(scope.row.team.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数" ></el-table-column>
      <el-table-column prop="totalRcard" label="红牌数" ></el-table-column>
      <el-table-column prop="averageRcard" label="场均红牌数" ></el-table-column>
    </el-table>



    <el-table v-if="rankname=='球员射手榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="300px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalGoal" label="进球" style="text-align:center"></el-table-column>
      <el-table-column prop="averageGoal" label="场均进球" style="text-align:center;"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员助攻榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="300px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalAssist" label="助攻" style="text-align:center"></el-table-column>
      <el-table-column prop="averageAssist" label="场均助攻" style="text-align:center;"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员身价榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="player.playerValue" label="身价" style="text-align:center;"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员射门榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalShoot" label="射门" style="text-align:center;"></el-table-column>
      <el-table-column prop="averageShoot" label="场均射门" style="text-align:center;"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员射正榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalOntarget" label="射正" style="text-align:center;"></el-table-column>
      <el-table-column prop="averageOntarget" label="场均射正" style="text-align:center;"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员传球榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队"></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column label="传球数（成功传球数）" >
        <template slot-scope="scope"> 
            <div v-if="scope.row.totalPass">
              {{scope.row.totalPass}}({{scope.row.totalOkpass}})
            </div> 
        </template>
      </el-table-column>
      <el-table-column label="场均传球数（场均成功传球数）" >
        <template slot-scope="scope"> 
            <div v-if="scope.row.averagePass">
              {{scope.row.averagePass}}({{scope.row.averageOkpass}})
            </div> 
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员越位榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队"></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalOffside" label="越位" style="text-align:center;"></el-table-column>
      <el-table-column prop="averageOffside" label="场均越位" style="text-align:center;"></el-table-column>
    </el-table>


    <el-table v-if="rankname=='球员过人榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column label="尝试过人数（成功过人数）" >
        <template slot-scope="scope"> 
            <div v-if="scope.row.totalSurpass">
              {{scope.row.totalSurpass}}({{scope.row.totalOksurpass}})
            </div> 
        </template>
      </el-table-column>
      <el-table-column label="场均尝试过人数（场均成功过人数）" >
        <template slot-scope="scope"> 
            <div v-if="scope.row.totalSurpass">
              {{scope.row.averageSurpass}}({{scope.row.averageOksurpass}})
            </div> 
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员抢断榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalPreemption" label="抢断" style="text-align:center;"></el-table-column>
      <el-table-column prop="averagePreemption" label="场均抢断" style="text-align:center;"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员犯规榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalFoul" label="犯规数" style="text-align:center;"></el-table-column>
      <el-table-column prop="averageFoul" label="场均犯规数" style="text-align:center;"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员被犯规榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队"></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalBefouled" label="被侵犯数" style="text-align:center;"></el-table-column>
      <el-table-column prop="averageBefouled" label="场均被侵犯" style="text-align:center;"></el-table-column>
    </el-table>
    
    <el-table v-if="rankname=='球员黄牌榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalYcard" label="黄牌" style="text-align:center;"></el-table-column>
      <el-table-column prop="averageYcard" label="场均黄牌" style="text-align:center;"></el-table-column>
    </el-table>

    <el-table v-if="rankname=='球员红牌榜'"  :data="rankplayerData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      ​​​​​​​<el-table-column label="排名" width="50px">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column prop="player.playerName" label="球员名称" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.player">
          <a class="testA" @click="PlayerDetail(scope.row.player.id)">{{scope.row.player.playerName}}
          </a>
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="player.playerImg" label="球员图片" width="200px">
        <template slot-scope="scope">
          <div v-if="scope.row.player.playerImg" style="text-align:center">
             <img :src="scope.row.player.playerImg" style="display:inline-block;vertical-align: middle;" width="80" height="100" @click="PlayerDetail(scope.row.player.id)">
          </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="team.teamName" label="所属球队" ></el-table-column>
      <el-table-column prop="gamesPlayed" label="出场次数" width="150px"></el-table-column>
      <el-table-column prop="totalRcard" label="红牌" style="text-align:center;"></el-table-column>
      <el-table-column prop="averageRcard" label="场均红牌" style="text-align:center;"></el-table-column>
    </el-table>
  </div>
    <div id="saizhi" v-if="leagueId!=''"> 
      <div class="htitle">
        <strong>赛 制</strong>
        
      </div>
    </div>

    <div id="sclassRule" v-if="leagueId!=''"> 
      <el-form  size="small" :disabled="true" >
      <el-form-item >
        <el-input type="textarea" v-if="frontleaguefrom.leagueProfile" v-model="frontleaguefrom.leagueProfile" 
        style="width:100%;min-height:80px;margin-left: 0;" autosize>
        </el-input>
      </el-form-item>
    </el-form>
    </div>

    <el-dialog title="比赛详细数据" :visible.sync="gamedataFormVisible" width="50%" >
      <el-form label-width="80px" size="small" >
      <div class="gamedatainfo" style="display: flex;justify-content: center;align-items:center">
      <div style="" >
        <h1>主队：</h1>
        <h2>{{ gamedataform.homeTeamInfo.teamName }}</h2>
        <div v-if="gamedataform.homeTeamInfo.teamImg">
          <img :src="gamedataform.homeTeamInfo.teamImg" width="120" height="120">
        </div>
        <div v-else>无图片</div>
        <div>
          <h2>进攻</h2>
          <el-form-item label="主队进球">
          <el-input v-model="gamedataform.homeGoal" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="主队控球">
          <el-input v-model="gamedataform.homeControl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队射门">
          <el-input v-model="gamedataform.homeShoot" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队射正">
          <el-input v-model="gamedataform.homeOntarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队过人">
          <el-input v-model="gamedataform.homeSurpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        
        <div>
          <h2>传球</h2>
        <el-form-item label="主队传球">
          <el-input v-model="gamedataform.homePass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队成功传球">
          <el-input v-model="gamedataform.homeOkpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        
        
        <div>
          <h2>犯规</h2>
        <el-form-item label="主队越位">
          <el-input v-model="gamedataform.homeOffside" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队犯规">
          <el-input v-model="gamedataform.homeFoul" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队黄牌">
          <el-input v-model="gamedataform.homeYcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主队红牌">
          <el-input v-model="gamedataform.homeRcard" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        
      </div>
      <div style="">
        <h1>客队：</h1>
        <h2>{{ gamedataform.awayTeamInfo.teamName }}</h2>
        <div v-if="gamedataform.awayTeamInfo.teamImg">
          <img :src="gamedataform.awayTeamInfo.teamImg" width="120" height="120">
        </div>
        <div v-else>无图片</div>
        <div>
          <h2>进攻</h2>
        <el-form-item label="客队进球">
          <el-input v-model="gamedataform.awayGoal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队控球">
          <el-input v-model="gamedataform.awayControl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队射门">
          <el-input v-model="gamedataform.awayShoot" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队射正">
          <el-input v-model="gamedataform.awayOntarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队过人">
          <el-input v-model="gamedataform.awaySurpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        

        <div>
          <h2>传球</h2>
         <el-form-item label="客队传球">
          <el-input v-model="gamedataform.awayPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队成功传球">
          <el-input v-model="gamedataform.awayOkpass" autocomplete="off"></el-input>
        </el-form-item> 
        </div>
        
        
        <div>
          <h2>犯规</h2>
        <el-form-item label="客队越位">
          <el-input v-model="gamedataform.awayOffside" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队犯规">
          <el-input v-model="gamedataform.awayFoul" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队黄牌">
          <el-input v-model="gamedataform.awayYcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客队红牌">
          <el-input v-model="gamedataform.awayRcard" autocomplete="off"></el-input>
        </el-form-item>
        </div>
        
      </div>
      </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="gamedataFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="球员场上数据" :visible.sync="playerdataFormVisible" width="50%" >
      <el-form label-width="80px" size="small" >
      <div class="playerdatainfo" style="display: flex;">
      <div style="" >
        
        <el-form-item label="球队">
        <el-select v-model="playerselectform.teamId" clearable placeholder="请选择球队" style="width: 200px" @change="changeteam()">
        <el-option v-for="item in teamoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName }}
        </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="球员">
        <el-select v-model="playerselectform.playerId" clearable placeholder="请选择球员" style="width: 200px" @change="changeplayer()">
        <el-option v-for="item in playeroptions" :key="item.id" :label="item.playerName" :value="item.id">
            {{ item.playerName }}
        
        </el-option>
        </el-select>
        <div v-if="playerselectform.playerId">
          <img :src="playerdataform.player.playerImg" width="120" height="120">
        </div>
        <div v-else>无图片</div>
        </el-form-item>
      </div>
        <div>
        <h2>进攻</h2>
        <el-form-item label="进球">
          <el-input v-model="playerdataform.singleGoal" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="助攻">
          <el-input v-model="playerdataform.singleAssist" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="射门">
          <el-input v-model="playerdataform.singleShoot" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="射正">
          <el-input v-model="playerdataform.singleOntarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="尝试过人">
          <el-input v-model="playerdataform.singleSurpass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成功过人">
          <el-input v-model="playerdataform.singleOksurpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>

        <div>
        <h2>传球</h2>
        <el-form-item label="传球">
          <el-input v-model="playerdataform.singlePass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成功传球">
          <el-input v-model="playerdataform.singleOkpass" autocomplete="off"></el-input>
        </el-form-item>
        </div>

        <div>
        <h2>防守与犯规</h2>
        <el-form-item label="抢断">
          <el-input v-model="playerdataform.singlePreemption" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="越位">
          <el-input v-model="playerdataform.singleOffside" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="犯规">
          <el-input v-model="playerdataform.singleFoul" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="被犯规">
          <el-input v-model="playerdataform.singleBefouled" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="黄牌">
          <el-input v-model="playerdataform.singleYcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="红牌">
          <el-input v-model="playerdataform.singleRcard" autocomplete="off"></el-input>
        </el-form-item>
        </div>       
      </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="playerdataFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</div>

</template>



<script>
export default {
  name: "Home",
  data(){
    return{
      imgs: [
      require('../../assets/Rotation1.jpg'),
      require('../../assets/Rotation2.jpg'),
      require('../../assets/Rotation3.jpg')
      ],
      leagueSeason:"",
      leagueId:"",
      gameRounds:"",
      homeTeam:"",
      awayTeam:"",
      seasonoptions:[],
      leagueoptions:[],
      roundsoptions:[],
      homeoptions:[],
      awayoptions:[],
      tableData: [],
      total: 0,//总数
      current: 1,//当前页
      size: 10,//每页数量
      gamedataFormVisible:false,
      playerdataFormVisible:false,
      gamedataform:{
        homeTeamInfo:{
          teamImg:'',
          teamName:''
        },
        awayTeamInfo:{
          teamImg:'',
          teamName:''
        }
      },//比赛详细数据表单
      playerselectform:{},//查看球员场上数据时，选择球队球员表单
      frontleaguefrom:{},//前台页面赛制信息表单
      playerdataform:{
        player:{
          playerImg:''
        }
      },//球员场上数据表单
      gamedatagameId:"",//比赛数据外键比赛id
      teamoptions:"",//查看球员场上数据时的选择球队框
      playeroptions:"",//查看球员场上数据时的选择球员框
      playerdatagameId:"",//球员单场数据外键比赛id

      //联赛积分榜单列表数据
      ranktableData:[],

      //球队榜单列表数据
      rankteamData:[],

      //球员榜单列表数据
      rankplayerData:[],

      //榜单绑定值
      homeAway:"",//联赛积分榜全部或者主客场
      playerRankId:"",//球员榜单绑定id
      teamRankId:"",//球队榜单绑定id

    
      //榜单选择项
      playerrankoptions:[//球员榜单选择项
        {id:1,value:"球员射手榜"},
        {id:2,value:"球员助攻榜"},
        {id:3,value:"球员身价榜"},
        {id:4,value:"球员射门榜"},
        {id:5,value:"球员射正榜"},
        {id:6,value:"球员传球榜"},
        {id:7,value:"球员越位榜"},
        {id:8,value:"球员过人榜"},
        {id:9,value:"球员抢断榜"},
        {id:10,value:"球员犯规榜"},
        {id:11,value:"球员被犯规榜"},
        {id:12,value:"球员黄牌榜"},
        {id:13,value:"球员红牌榜"},
      ],
      teamrankoptions:[//球队榜单选择项
        {id:1,value:"球队进球榜"},
        {id:2,value:"球队失球榜"},
        {id:3,value:"球队身价榜"},
        {id:4,value:"球队控球榜"},
        {id:5,value:"球队射门榜"},
        {id:6,value:"球队射正榜"},
        {id:7,value:"球队传球榜"},
        {id:8,value:"球队越位榜"},
        {id:9,value:"球队过人榜"},
        {id:10,value:"球队犯规榜"},
        {id:11,value:"球队黄牌榜"},
        {id:12,value:"球队红牌榜"},
        
      ],
      //榜单名称展示strong
      rankname:"",

    }
  },
  created(){
    this.load()
  },
  computed:{
    winorlose(){
      return function(data){
      if(data.gameData.homeGoal>data.gameData.awayGoal){
        return "win";
      }else if(data.gameData.homeGoal==data.gameData.awayGoal){
        return "flatten";
      }else{
        return "lose";
      }
      }
      
    }
  },
  methods:{
    load(){
      this.request.get("/game/front/pageGame", {
        params: {
          current: this.current,
          limit: this.size,
          leagueSeason:this.leagueSeason,
          homeTeam:this.homeTeam,
          awayTeam:this.awayTeam,
          leagueId:this.leagueId,
          gameRounds:this.gameRounds
        }
      }).then(res => {
        console.log(res.pageGame.records)
        this.tableData = res.pageGame.records
        this.total = res.total
      }),

      //查询所有赛季信息到选择框中
      this.request.get("/league/season").then(res => {
        console.log(res.data)
        this.seasonoptions = res.data
      }),

      //查询所有球队信息到选择框中
      this.request.get("/team/findall").then(res=>{
        this.homeoptions = []
        this.awayTeam = []
        console.log(res.data)
        this.homeoptions = res.data
        this.awayoptions = res.data
      }),

      //查询所有联赛信息到选择框中
      this.request.get("/league/findall").then(res=>{
        console.log(res.data)
        this.leagueoptions = res.data
      })
    },
    //查询联赛积分榜  分主客场
    loadleaguetable(){
      this.request.get("/rank/front/leagueTable",{
        params:{
          leagueId:this.leagueId,
          homeAway:this.homeAway
        }
      }).then(res=>{
        console.log(res.data)
        this.rankteamData=""
        this.rankplayerData=""
        this.ranktableData = res.data
        this.rankname="联赛积分榜"
        
      })
    },

    //查询球队、球员榜单
    loadRank(){
      this.request.get("/rank/front/teamRank",{
        params:{
          leagueId:this.leagueId,
          teamRankId:this.teamRankId,
          homeAway:this.homeAway
        }
      }).then(res=>{
        console.log(this.teamRankId)
        console.log(res.data)
        this.ranktableData=""
        this.rankplayerData=""
        this.rankteamData = res.data
        if(!this.teamRankId==''){
          if(this.teamRankId==1){
          this.rankname="球队进球榜"
        }else if(this.teamRankId==2){
          this.rankname="球队失球榜"
        }else if(this.teamRankId==3){
          this.rankname="球队身价榜"
        }else if(this.teamRankId==4){
          this.rankname="球队控球榜"
        }else if(this.teamRankId==5){
          this.rankname="球队射门榜"
        }else if(this.teamRankId==6){
          this.rankname="球队射正榜"
        }else if(this.teamRankId==7){
          this.rankname="球队传球榜"
        }else if(this.teamRankId==8){
          this.rankname="球队越位榜"
        }else if(this.teamRankId==9){
          this.rankname="球队过人榜"
        }else if(this.teamRankId==10){
          this.rankname="球队犯规榜"
        }else if(this.teamRankId==11){
          this.rankname="球队黄牌榜"
        }else if(this.teamRankId==12){
          this.rankname="球队红牌榜"
        }
        }
        
        console.log(this.rankname)
      }),

      this.request.get("/rank/front/playerRank",{
        params:{
          leagueId:this.leagueId,
          playerRankId:this.playerRankId
        }
      }).then(res=>{
        console.log(res.data)
        this.ranktableData=""
        this.rankteamData=""
        this.rankplayerData=res.data
        console.log("=======================================+++++++++++++++++++++++")
        console.log(this.rankplayerData)
        if(!this.playerRankId==''){
          if(this.playerRankId==1){
          this.rankname="球员射手榜"
        }else if(this.playerRankId==2){
          this.rankname="球员助攻榜"
        }else if(this.playerRankId==3){
          this.rankname="球员身价榜"
        }else if(this.playerRankId==4){
          this.rankname="球员射门榜"
        }else if(this.playerRankId==5){
          this.rankname="球员射正榜"
        }else if(this.playerRankId==6){
          this.rankname="球员传球榜"
        }else if(this.playerRankId==7){
          this.rankname="球员越位榜"
        }else if(this.playerRankId==8){
          this.rankname="球员过人榜"
        }else if(this.playerRankId==9){
          this.rankname="球员抢断榜"
        }else if(this.playerRankId==10){
          this.rankname="球员犯规榜"
        }else if(this.playerRankId==11){
          this.rankname="球员被犯规榜"
        }else if(this.playerRankId==12){
          this.rankname="球员黄牌榜"
        }else if(this.playerRankId==13){
          this.rankname="球员红牌榜"
        }
        }
        
        
      })
      
    },
    //清空榜单选择
    restRank(){
      this.playerRankId="",
      this.teamRankId="",
      this.loadRank()
    },

    
    //选择联赛时，查询该联赛的轮次和球队和联赛信息
    changeLeague(){
      this.request.get("/league/findOne/"+this.leagueId).then(res=>{
        if(res.code === '200'){
        this.roundsoptions=[]
        let max = res.data.leagueRounds
        this.roundsoptions[0]=1;
        for (let i = 1; i <max; i++) {
        this.roundsoptions[i]=this.roundsoptions[i-1]+1;
        }
        }else{
          this.$message.error("查找失败")
        }
    
      }),
      this.request.get("/league/findTeamByLeagueId/"+this.leagueId).then(res=>{
        if(res.code === '200'){
          this.homeoptions = []
          this.awayoptions = []
          this.homeoptions = res.data
          this.awayoptions = res.data
        }else{
          this.$message.error("查找失败")
        }
      }),
      this.request.get("/league/front/findOne/"+this.leagueId).then(res=>{
        if(res.code === '200'){
          this.frontleaguefrom={}
          this.frontleaguefrom=res.data
          console.log(this.frontleaguefrom)
        }else{
          this.$message.error("查找失败")
        }
      })
    },


      //查看比赛详细数据
      gamedata(row){
      this.gamedataform={
        homeTeamInfo:{
          teamImg:'',
          teamName:''
        },
        awayTeamInfo:{
          teamImg:'',
          teamName:''
        }
      }
      //先获取选中的比赛id值
      this.gamedatagameId = row.id
      console.log(this.gamedatagameId)
      this.gamedataFormVisible = true
      //查看比赛详细数据
      this.request.get("/game/getGamedata",{
        //后端接收参数
        params:{
          gameId:this.gamedatagameId
        }
      }).then(res=>{
        if(res.data){
            this.gamedataform = res.data;
        }
      })
    },
     //查出两方球队到选择框中
     playerdata(row){      
      this.playerdataform={
        player:{
          playerImg:''
        }
      }
      this.playeroptions=[]
      this.playerselectform={}
      this.playerdatagameId = row.id
      
      this.playerdataFormVisible=true
      //查出两方球队到选择框中
      this.request.get("/player/getTeamByGameId",{
        params:{
          gameId:this.playerdatagameId
        }
      }).then(res=>{
        if(res.data){
          this.teamoptions=res.data
        }
      })
    },

    //选择球队时，查询该球队的球员  
    changeteam(){
      this.playerdataform={
        player:{
          playerImg:''
        }
      }
      this.request.get("/player/getPlayerByTeamId/"+this.playerselectform.teamId).then(res=>{
        if(res.code === '200'){
          this.playeroptions = []
          this.playeroptions = res.data
          console.log(this.playeroptions)
        }else{
          this.$message.error("查找失败")
        }
      })
    },
    //选择球员时，查询该球员的数据
    changeplayer(){
      this.playerdataform={
        player:{
          playerImg:''
        }
      }
      this.request.get("/player/getPlayerData",{
        params:{
          gameId:this.playerdatagameId,
          playerId:this.playerselectform.playerId
        }
      }).then(res=>{
        if(res.data!=null){
          console.log(this.playerdatagameId)
          console.log(this.playerselectform.playerId)
          console.log(res.data)
          this.playerdataform = res.data;
        }
          
          
      })
    },
    reset() {
      this.homeTeam = ""
      this.awayTeam = ""
      this.leagueId = ""
      this.leagueSeason = ""
      this.gameRounds = ""
      this.load()
    },

    //清空榜单
    resetRank(){
      this.rankname=""
      this.teamRankId=""
      this.playerRankId=""
      this.ranktableData=""
      this.rankplayerData=""
      this.rankteamData=""
      this.loadRank()
    },
    //分页每页大小
    handleSizeChange(size) {
      console.log(size)
      this.size = size
      this.load()
    },

    //分页第几页
    handleCurrentChange(current) {
      console.log(current)
      this.current = current
      this.load()
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },

    //球队路由跳转
    TeamDetail(id) {
       this.$router.push({
          path: '/front/teamdetail',
          query: {
            id: id
          }
        })
    },

    //比赛技术统计跳转
    GameDetail(id) {
       this.$router.push({
          path: '/front/GameDetail',
          query: {
            id: id
          }
        })
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    GameDetails(row,event,column){
      console.log(row, event, column)
      console.log(row.id)
      this.$router.push({
          path: '/front/GameDetail',
          query: {
            id: row.id
          }
        })
    },
    PlayerDetail(id) {
       this.$router.push({
          path: '/front/playerdetail',
          query: {
            id: id
          }
        })
    },

  }
};
</script>

<style>
#saizhi{
  border: 1px solid #e5e5e5;
    margin-top: 8px;
    clear: both;
}
.htitle{
  line-height: 35px;
    text-align: center;
    font-size: 14px;
    background-color: #f0f0f0;
    position: relative;
}
.sclassRule{
  line-height: 100px;
  padding: 15px;
}
.win{
  font-size: 30px;
  color:green;
}
.flatten{
  font-size: 30px;
  color:#005eb8;
}
.lose{
  font-size: 30px;
  color:red
}
.testA{
  color: #005eb8;
}
.testA:hover{
  cursor: pointer;
}
</style>